import React from 'react';
import _ from 'underscore';

import dispatcher from 'lib/dispatcher';
import Card from 'lib/components/card.jsx';
import Loading from 'lib/components/Loading.jsx';
import SideSlider from 'lib/components/SideSlider.jsx';

import { defaultApi } from '../../apis/core-util';
import { getDayFromAlias } from '../../common/DateRangeStoreEnhanced.es6';

import FavoriteView from './FavoriteView.jsx';

class FavoriteConent extends Loading {
  resetDataSource(item) {
    this.props.onClosing(item);
  } // resetDataSource

  editFavoriteHandler(item) {
    FavoriteView.mount({
      id: item.id,
      title: item.name,
      events: this.props.events,
      alias: item.time,
      chartParameter: item.data,
      onClose: res => {
        if (res && res.isSuccess) {
          if (res.result.$type === 'updated_favorite') {
            item.name = res.result.data.name;
            item.time = res.result.data.alias;

            this.forceUpdate(() => dispatcher.dispatch(res.result));
          } else if (res.result.$type === 'removed_favorite') {
            this.props.onRemoved(res.result.data);
          } else if (res.result.$type === 'added_favorite') {
            this.props.onAdded(res.result.data);
          }
        }
      }
    });
  } // editFavoriteHandler

  renderBody(data) {
    return (
      <div className="box">
        <div className="t1">收藏</div>
        <div>
          <div className="t2">行为事件分析</div>
          <ul>
            {
              _.map(data['/segmentation/'], (p, i) => {
                let time = getDayFromAlias(p.time);
                return (
                  <li key={ p.id }>
                    <div
                      className="text"
                      title={ p.name }
                      onClick={ this.resetDataSource.bind(this, p) }>
                      { p.name }
                    </div>
                    <div className="note">{ time ? time.item.text : '--' }</div>
                    <div className="iconfont" onClick={ this.editFavoriteHandler.bind(this, p) }>&#xe6b2;</div>
                  </li>
                );
              }, this)
            }
          </ul>
          {/*<div className="t2">回访频率</div>
          <ul>
            {
              _.map(data['/retention/'], (p, i) => {
                return (
                  <li key={ i }>
                    <div className="text" title={ p.name }>{ p.name }</div>
                    <div className="note">过去30天</div>
                    <div className="iconfont">&#xe6b2;</div>
                  </li>
                );
              }, this)
            }
          </ul>*/}
        </div>
      </div>
    );
  } // renderBody
}

export default class FavoriteManager extends SideSlider {
  constructor(props, context) {
    super(props, context);

    this.state = {
      store: {
        loading: true
      }
    }; // state

    this.bookmarkApi = defaultApi({
      __url: `sd/${ BlueWare.appId }/api/bookmarks/all`
    });
  } // constructor

  removedHandler({ id, contentType }) {
    if (this.state.store.data) {
      this.state.store.data[contentType] = _.filter(this.state.store.data[contentType], p => p.id !== id);
      this.forceUpdate(() => dispatcher.dispatch({
        $type: 'removed_favorite',
        data: {
          contentType,
          id
        }
      }));
    }
  } // removedHandler

  addHandler() {
    this.fetchData();
  } // addHandler

  fetchData() {
    this.bookmarkApi
        .fetch()
        .progress(() => this.setState({
          store: {
            loading: true
          }
        }))
        .fail(error => this.setState({
          store: {
            error: error.responseText
          }
        }))
        .done(data => this.setState({
          store: {
            data
          }
        }));
  } // fetchData

  componentDidMount() {
    super.componentDidMount();
    this.fetchData();
  } // componentDidMount

  renderBody() {
    return (
      <FavoriteConent
        { ..._.extend({}, this.props, this.state) }
        onRemoved={ this.removedHandler.bind(this) }
        onAdded={ this.addHandler.bind(this) }
        onClosing={ item => this.close(item) } />
    );
  } // renderBody
}

FavoriteConent.defaultProps = {
  alias: null,
  store: {},
  defaultStyle: {
    color: 'black',
    marginTop: '-100px',
    position: 'relative',
    top: '50%'
  }
}
